<html>
<head>
<link rel="stylesheet" href="ui/css/smoothness/jquery-ui-1.7.custom.css" />
<script type="text/javascript" src="ui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="../jquery.hijack.min.js"></script>
<style type="text/css">
body { font-size: 11px;}
code,pre { background-color: #f0f0f0; padding: 3px;}
</style>
</head>
<body>
<h1>jQuery hijack plugin demo</h1>
<p>This is a demonstration of <a href="http://code.google.com/p/jquery-hijack/">jQuery hijack</a> plugin.</p>
<p>This demo uses <a href="http://jquery.com">jQuery</a> 1.3.2 and <a href="http://jqueryui.com">jQuery UI</a> 1.7, although any jQuery-based plugin that loads remote content into an element (widget) and allows you to pass callbacks could be used instead. I also used this plugin with <a href="http://dev.iceburg.net/jquery/jqModal/">jqModal</a>.</p>
<p>See <a href="http://blog.kotowicz.net/2009/03/jquery-hijack-plugin-nice-addition-to.html">blog post about the plugin</a> for additional description.</p>
<p>If you are interested in this plugin, you may also try <a href="http://code.google.com/u/kkotowicz/">my other plugins</a>, visit <a href="http://blog.kotowicz.net/">my blog</a> or <a href="http://web.eskot.pl">portfolio</a> for other javascript related info.</p>
<h2>Hijacking jQuery UI tabs</h2>
<div id="tabs">
<ul>
<li><a href="ajax1.html">1 - Hijack links</a></li>
<li><a href="ajax2.html">2 - Hijack forms</a></li>
</ul>
</div>
<p>Code used:</p>
<pre>
$("#tabs").tabs({ // start jQuery UI tabs
    load: function(event, ui) { // load callback, hijacking every loaded panel
        $(ui.panel).hijack();
    }
});
</pre>
<h2>Hijacking jQuery UI dialog</h2>
<button type="button" rel="ajax1.html" class="opendialog">Open dialog</button>
<button type="button" rel="ajax2.html" class="opendialog">Open dialog 2</button>
<div id="dialog" style="display:none"></div>
<pre>
&lt;button type="button" rel="ajax1.html" class="opendialog"&gt;Open dialog&lt;/button&gt;
&lt;button type="button" rel="ajax2.html" class="opendialog"&gt;Open dialog 2&lt;/button&gt;
&lt;div id="dialog" style="display:none"&gt;&lt;/div&gt;

$(".opendialog").click(function() { // when clicking on a button
    $("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
        $(this)
          .dialog('destroy') // destroy dialog widget (if exists)
          .dialog({ // and recreate it with following options
            title: "jQuery hijack demo",
            open: function() { $(this).hijack()}
          });
    });
});
</pre>
<h2>After-hijack callbacks in jQuery hijack</h2>
<p>It is possible to attach a callback function that will be run after hijacking of an element. This callback function will be called with no parameters and <code>this</code> will be the element that is being hijacked. You may use this to e.g. initialize some widgets within loaded content. Here we use this function to change colors of paragraphs.</p>
<button type="button" rel="ajax1.html" class="opendialog2">Open dialog</button>
<button type="button" rel="ajax2.html" class="opendialog2">Open dialog 2</button>
<pre>
// define a function
var paragraphsToRed = function() {
    alert('All paragraphs will be red...');
    $('p',this).css('color', 'red'); // find all paragraphs in current context and make them red
};

$(".opendialog2").click(function() { // when clicking on a button
    $("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
        paragraphsToRed.call(this); // call paragraphsToRed for the first time
        $(this)
            .dialog('destroy') // destroy dialog widget (if exists)
            .dialog({ // and recreate it with following options
                title: "jQuery hijack demo (callback)",
                open: function() { $(this).hijack(paragraphsToRed); } // attach the paragraphsToRed function
            });
    });
});
</pre>
<h2>... and this is the behaviour without using the plugin:</h2>
<h3>Tabs</h3>
<div id="tabs2">
<ul>
<li><a href="ajax1.html">Ajax demo 1</a></li>
<li><a href="ajax2.html">Ajax demo 2</a></li>
</ul>
</div>
<h3>Dialog</h3>
<button type="button" rel="ajax1.html" class="opendialognohijack">Open dialog</button>
<button type="button" rel="ajax2.html" class="opendialognohijack">Open dialog 2</button>

<script type="text/javascript">
$(function() {

    // with hijack()
    $("#tabs").tabs({ // start jQuery UI tabs
        load: function(event, ui) { // load callback, hijacking every loaded panel
            $(ui.panel).hijack();
        }
    });

    $(".opendialog").click(function() { // when clicking on a button
        $("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
            $(this)
              .dialog('destroy') // destroy dialog widget (if exists)
              .dialog({ // and recreate it with following options
                title: "jQuery hijack demo",
                open: function() { $(this).hijack()}
              });
        });
    });

    // define a function
    var paragraphsToRed = function() {
        alert('All paragraphs will be red...');
        $('p',this).css('color', 'red'); // find all paragraphs in current context and make them red
    };

    $(".opendialog2").click(function() { // when clicking on a button
        $("#dialog").load($(this).attr('rel'), function() { // load remote content from its 'rel' attribute into hidden div
            paragraphsToRed.call(this); // call paragraphsToRed for the first time
            $(this)
                .dialog('destroy') // destroy dialog widget (if exists)
                .dialog({ // and recreate it with following options
                    title: "jQuery hijack demo (callback)",
                    open: function() { $(this).hijack(paragraphsToRed); } // attach the paragraphsToRed function
                });
        });
    });

    // without hijack()
    $("#tabs2").tabs(); // standard jQuery UI tabs

    $(".opendialognohijack").click(function() {
        $("#dialog").load($(this).attr('rel'), function() {
            $(this)
                    .dialog('destroy')
                    .dialog({ // same, but without hijacking on open
                title: "jQuery hijack demo"
                });
        });
    });

});
</script>
</body>
</html>
